<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../layui/layui.js"></script>
</head>
<body class="layui-layout-body">
<!--搜索栏-->
<div class="layui-inline">
    <input class="layui-input" name="id"  id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="search" data-type="reload">用户id搜索</button>
<!--layui的数据表格-->

<table id="post" lay-filter="post"></table>



<script type="text/javascript">

    var tableInit = function(url) {

        layui.use(['table'], function () {
            var $ = layui.$
            var table = layui.table;
            table.render({
                id: 'post',
                elem: '#post'
                , url: url //数据接口
                ,parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": "OK", //解析提示文本
                        "count": 100, //解析数据长度
                        "data": res //解析数据列表
                    };
                }
                //where用来传递额外的参数，searchable表示是否启动搜索，search表示搜索的值
                , where: {searchable: false, search: "something"}


                , limit: 10//每页默认数
                , limits: [10, 20, 30, 40] //分页的下拉框（即选择每页有多少条数据)
                , page: true //开启分页
                , toolbar: '#toolbarDemo'//头部工具栏，这里引用的是id为toolbardemo的script标签
                //表格属性
                , cols: [
                    [ //第一列的复选框
                        {type: 'checkbox'}
                        // field用来指定该列对应的是json数据的哪一个属性
                        //          title表示列头的名称，sort表示该列是否开启排序
                        , {field: 'post_id', width: 180, title: 'ID', sort: true}
                        , {field: 'dates', width: 180, title: '时间', sort: false}
                        , {field: 'post_title', width: 180, title: '标题'}
                        ,{fixed: 'right', width:250, align:'center', toolbar: '#barDemo'}
                        // , {field: 'post_content', width: 55, title: '内容'}
                        // , {field: 'post_content', width: 55, title: '内容'}
                        // , {field: 'post_content', width: 55, title: '内容'}
                        // , {field: 'post_content', width: 55, title: '内容'}
                        //templet用来在做一些html的渲染，这里是id为sexTpl的script标签

                    ]
                ]
                // ,where: {timestamp: (new Date()).valueOf()}
            });

            //监听头部工具条事件
            // $("#selected").click(function () {
            //     var checkStatus = table.checkStatus('demo')
            //         ,data = checkStatus.data;
            //     var datastr = "";
            //     for(var i = 0; i < data.length;i++){
            //         datastr += data[i].id + ",";
            //     }
            //     layer.alert(datastr)
            // })
            //监听行工具时间
            table.on('tool(post)', function(obj){
                var data = obj.data;
                //var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                //console.log(obj)
                if(obj.event === 'inform'){
                    layer.confirm('确认举报吗', function(index){
                        layer.close(index)
                        var id = obj.data.post_id;
                        //window.location.href="comment_post.html"
                        $.ajax({
                            url:"http://localhost:8080/webDemo_war_exploded/DelServlet?id="+id,

                            success:function(res){
                                console.log(res)
                            }

                        })
                    });
                } else if(obj.event === 'love') {
                    layer.confirm('确认点赞吗', function (index) {
                        //alert("确认")
                        var post_id = obj.data.post_id;
                        $.ajax({
                            url:"http://localhost:8080/webDemo_war_exploded/LikeServlet?post_id="+post_id,
                            success:function(res){
                                console.log(res)
                            }
                        })
                        layer.close(index);
                    });
                }else if(obj.event === 'comment'){
                    window.location.href="comment.html";
                }
            });



            //监听搜索
            $("#search").click(function () {
                var str = $("#demoReload").val();
                console.log(str)
                //执行重载
                table.reload('demo', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: str
                    }
                });

            })


        })
    }
    tableInit("http://localhost:8080/webDemo_war_exploded/LifePostServlet");

    layui.use(['jquery', 'layer'], function(){
        var $ = layui.$ //重点处
            ,layer = layui.layer;

        //后面就跟你平时使用jQuery一样
        $('#findById').on('click',function(res){
            var id = $(this).parent().parent().find(".layui-input").val();
            tableInit("http://localhost:8080/user/queryById/"+id)
        })
    });


</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="love">点赞</a>
    <a href="comment_post2.html" class="layui-btn layui-btn-xs" lay-event="comment">评论</a>
    <!--    <a href="https://www.baidu.com/">-->
    <!--        <button>点我跳转到度娘！</button>-->
    <!--    </a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="inform">举报</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    <!--    {{#  if(d.auth > 2){ }}-->
    <!--    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>-->
    <!--    {{#  } }}-->
</script>



</body>

</html>